<template>
    <div class="picList">
        <el-header>{{category_name}}</el-header>
        <el-container>
            <div class="box">
                <el-row>
                    <el-col :span="8" v-for="(o, index) in pic_list" :key="index" :offset="index > 0 ? 2 : 0">
                        <el-card :body-style="{ padding: '0px' }">
                            <el-image 
                                :src="o" 
                                :preview-src-list="srcList"
                                @click="addNumberOfhits(info[index].id)"
                                class="image">
                            </el-image>
                            <div style="padding: 14px;">
                                <el-dropdown>
                                    <span class="el-dropdown-link">
                                        {{info[index].imgTitle}}
                                    </span>
                                    <div class="bottom clearfix">
                                        <time class="time">发布时间：{{info[index].releaseTime}}</time>
                                    </div>
                                    <el-dropdown-menu slot="dropdown">
                                        <div class="pic_describe">{{info[index].imgDescribe}}</div>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </el-container>
    </div>
</template>

<script>
import user_image_url from './user_url'
import image_url from './image_url'
export default {
    data(){
        return{
            category_id: this.$route.query.category_id,
            category_name: this.$route.query.category_name,
            info: null,
            pic_list: null,
            srcList: null,
        }
    },
    methods:{
        addNumberOfhits(id){
            this.$axios({
                url: user_image_url[5].url,
                params: {
                    id: id
                }
            }).then(res => {
                console.log(res.data);
            })
        },
        gotoMorePic(){
            this.$axios({
                url: user_image_url[3].url,
                params:{
                    imgCategory : this.category_id,
                }
            }).then(res => {
                this.srcList = new Array(res.data.length);
                this.pic_list = new Array(res.data.length);
                this.info = new Array(res.data.length);
                this.info = res.data;
                for(let i=0;i<res.data.length;i++){
                    this.srcList[i] = image_url[0]+res.data[i].imgFilePath;
                }
                this.pic_list = this.srcList;
            })
        }
    },
    created(){
        this.gotoMorePic();
    }
}
</script>

<style>
    .el-header, .el-footer {
        background-color: #227093;
        color: #fff;
        font-size: 20px;
        letter-spacing: 2px;
        font-weight: bold;
        text-align: center;
        line-height: 60px;
    }
    
    .el-aside {
        background-color: #e1e6d3;
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }
    .box>.pic_type{
        display: inline-block;
        width: 100%;
        height: 50px;
        margin-left: 5%;
        /* background-color: pink; */
        margin-left: 20px;

        font-size: 25px;
        line-height: 50px;
        font-weight: bold;
        letter-spacing: 1px;
        color: #1d4e92;
        border-bottom: 2px solid #ddd;
    }

    /* 图片显示 */
    .el-col-8{
        width: 225px;
    }
    .el-col-offset-2{
        margin-left: 0px;
    }
    .el-card, .el-message{
        margin-top: 50px;
        margin-left: 25px;
    }
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 200px;
        height: 280px;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }

    .picList .box{
        width: 1420px;
        /* background-color: red; */
        margin-left: 50px;
        margin-top: 50px;
    }
    .picList .box el-row el-col el-card{
        float: left;
    }
    .el-dropdown-link {
        cursor: pointer;
    }
    .pic_describe{
        width: 200px;
        height: auto;
        font-size: 12px;
        color: #303133;
        padding: 10px;
    }
</style>